<template>
  <div class="drawer-footer" :style="getStyle">
    <template v-if="!$slots.footer">
      <a-space :size="8">
        <a-button
          v-bind="cancelButtonProps"
          @click="handleClose"
          v-if="showCancelBtn"
        >
          {{ cancelText }}
        </a-button>

        <a-button
          :type="okType"
          @click="handleOk"
          v-bind="okButtonProps"
          :loading="confirmLoading"
          v-if="showOkBtn"
        >
          {{ okText }}
        </a-button>
      </a-space>
    </template>

    <template v-else>
      <slot name="footer"></slot>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { footerProps } from '../props'

export default defineComponent({
  name: 'DrawerFooter',
  inheritAttrs: false,
  props: footerProps,
  emits: ['ok', 'close'],
  setup(props, { emit }) {
    const getStyle = computed(() => ({ textAlign: props.align }))
    function handleOk() {
      emit('ok')
    }

    function handleClose() {
      emit('close')
    }
    return { handleOk, handleClose, getStyle }
  }
})
</script>